<template>
	<s-layout title="转账" :bgStyle="{color:'#F6F6F6'}" onShareAppMessage>

		<view class="user-card ss-flex-row">
			<image :src="calcSrc" style="width:90rpx;height:90rpx;margin-left: 44rpx;margin-right: 19rpx;">
			</image>
			<view class="user ss-flex-col">
				<view class="name">{{state.user.nickname}}</view>
				<view class="mobile">{{state.user.mobile?formatPhoneNumber(state.user.mobile):''}}</view>
			</view>
		</view>
		<view class="transfer-card ss-flex-col">
			<view class="label">转出金额</view>
			<view class="dollar ss-flex-row ss-row-left">
				<view class="money ss-flex-row ss-row-center ss-col-center">¥</view>
				<input type="digit" maxlength="8" placeholder="单笔转账金额最高50,000元" v-model="state.amount"
					class="input-view" @input="inputChange" />
			</view>
			<view class='payment ss-flex-row ss-row-between ss-col-center'>
				<view class="tips ss-flex-row ss-row-left ss-col-center">
					<view class="other">付款账户</view>
					<view class='num'>余额：{{userInfo.money}}</view>
				</view>
				<image :src="sheep.$url.cdn('/static/income/arrow-left.png')" style="width: 9.77rpx;height: 26.9rpx;">
				</image>
			</view>
		</view>
		<view class="btn-view" @click="sureClick">确认</view>
		
		<s-pay-password-modal :amount="state.amount" @passwordSuccess="passwordSuccess"></s-pay-password-modal>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';

	import {
		onLoad,
		onShow,
		onUnload,
		onReachBottom 
	} from '@dcloudio/uni-app';

	import {
		ref,
		computed,
		reactive,
		nextTick
	} from 'vue';
	import _ from 'lodash';
	import {
		showPayPasswordModal,
		closePayPasswordModal
	} from '@/sheep/hooks/useModal';


	const userInfo = computed(() => sheep.$store('user').userInfo);

	const state = reactive({
		amount: '',
		user: {},
		status: '',
	})

	const calcSrc = computed(() => {

		if (state.user.avatar) {
			if (state.user?.avatar.includes("https") || state.user?.avatar.includes("http")) {
				return state.user?.avatar;
			} else {
				return sheep.$url.cdn(state.user?.avatar)
			}
		}



	})
	//格式化电话号码
	function formatPhoneNumber(phone) {
		return phone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1 $2 $3');
	}

	onLoad((e) => {
		if (e.mobile) {
			getUserInfoByMobile(e.mobile);
		}
	})
	//输入密码成功之后
	async function passwordSuccess(){
		
		closePayPasswordModal();
		
		const res = await sheep.$api.transfer.transferToFriend(state.user.id, {
			money: state.amount
		});
		
		if (res.error == 0) {
		
			sheep.$store('user').updateUserData();
		
			state.amount = '';
		
			setTimeout(() => {
				uni.showToast({
					title: res.msg,
					icon: 'none',
				});
			}, 1000);
		}
	}

	function sureClick() {
		
		//判断是否是0或者以.结尾
		if (state.amount == 0 || (/\.$/.test(state.amount))) {
			uni.showToast({
				title: '请输入正确的金额',
				icon: "none",
			});
			return;
		}

		//大于余额
		if (parseFloat(state.amount) > parseFloat(userInfo.value.money)) {
			uni.showToast({
				title: '余额不足',
				icon: "none",
			});
			return;
		}

		if (state.amount > 50000) {
			uni.showToast({
				title: '转账金额过大',
				icon: "none",
			})
			return;
		}
		
		uni.showModal({
			title: '提示',
			content: '确认转款',
			success: function(res) {
				if (res.confirm) {
					showPayPasswordModal();
				}
			}
		});
	}
	
	//获取转账用户
	async function getUserInfoByMobile(mobile) {


		const res = await sheep.$api.transfer.getUserInfoByMobile({
			mobile: mobile
		});

		if (res.error == 0) {
			state.user = res.data;
		}
	}


	//输入时去除开头的0
	function inputChange(e) {

		let value = e.detail.value;

		if (/^0\d+/.test(value)) {
			value = value.replace(/^0+/, '');
		}

		if (/^\./.test(value)) {
			value = '0' + value;
		}
		//最多两位小数
		value = value.replace(/[^\d.]/g, '') // 清除"数字"和"."以外的字符
		value = value.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 保留2位小数



		nextTick(() => {
			state.amount = value;
		})
	}
	
	
</script>

<style lang="scss" scoped>
	.user-card {
		margin-top: 36rpx;

		.name {
			margin-right:80rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 41rpx;
			letter-spacing: normal;
			color: #202020;
		}

		.mobile {
			margin-top: 8rpx;

			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 41rpx;
			letter-spacing: normal;
			color: #999999;
		}
	}

	.transfer-card {
		width: calc(100% - 22rpx - 18rpx - 21rpx - 19rpx);
		margin-top: 58rpx;
		margin-left: 22rpx;
		margin-right: 18rpx;
		padding: 19rpx 21rpx 49rpx 19rpx;
		height: calc(321rpx - 19rpx);
		border-radius: 20rpx;
		background: #FFFFFF;

		.label {

			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 43rpx;
			letter-spacing: normal;
			color: #1E1E1E;
		}

		.dollar {
			margin-top: 35rpx;

			height: 72rpx;

			padding-right: 19rpx;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid #D8D8D8;

			.money {
				margin-right: 48rpx;
				width: 50rpx;
				height: 72rpx;
				font-family: Source Han Sans;
				font-size: 50rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: normal;
				color: #1E1E1E;
			}

			.input-view {
				width: calc(100% - 48rpx - 50rpx);
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #AFAFAF;
				height: 41rpx;
				align-self: flex-end;
			}
		}

		.payment {
			height: 43rpx;
			margin-top: 48rpx;

			.tips {
				.other {

					width: 120rpx;
					height: 43rpx;
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 600;
					line-height: normal;
					letter-spacing: normal;
					color: #1E1E1E;
				}

				.num {
					margin-left: 64rpx;
					height: 43rpx;
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
					letter-spacing: normal;
					color: #999999;
				}
			}
		}
	}

	.btn-view {

		width: calc(100% - 22rpx - 18rpx);
		height: calc(104rpx - 29rpx);
		margin-top: 82rpx;
		margin-left: 22rpx;
		margin-right: 18rpx;

		padding-top: 29rpx;
		font-family: Source Han Sans;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 46rpx;
		text-align: center;
		letter-spacing: normal;
		color: #FFFFFF;


		border-radius: 100rpx;
		background: #4E31EF;
	}
</style>